<template>
  <div class="app-container">
      <basic-table
        :table-title="tableTitle"
        :multiple-table="false"
        :search-form="searchForm"
        :data-source="dataSource"
        :data-params="dataParams"
        :reload="reload"
        @closeReload="closeReload">
        <template v-slot:RequestParams="scope">
          <el-popover
            placement="right"
            width="400"
            style="height: 100px;"
            trigger="click">
            <div style="max-height: 600px;overflow: auto;">
              {{ scope.row.RequestParams }}
            </div>
            <el-button type="text" slot="reference">查看</el-button>
          </el-popover>
      </template>
      <template v-slot:ResponseResult="scope">
          <el-popover
            placement="right"
            width="400"
            trigger="click">
            <div style="max-height: 600px;overflow: auto;">
              {{ scope.row.ResponseResult }}
            </div>
            <el-button type="text" slot="reference" style="color: #67C23A">查看</el-button>
          </el-popover>
      </template>
      </basic-table>
  </div>
</template>
<script>
import BasicTable from '@/components/BasicTable/index.vue'
import { GetOperationRecordPages } from '@/api/OperationRecord'
export default {
  name: 'ImLogs',
  components: { BasicTable },
  data() {
    return {
      dataSource: () => GetOperationRecordPages,
      dataParams: {
      },
      loading: false,
      reload: false,
      tableTitle: [
        {
          label: '操作人姓名',
          value: 'UserName',
          show: true,
          width: 100
        },
        {
          label: '操作人公司名称',
          value: 'CompanyName',
          show: true,
        },
        {
          label: '模块名称',
          value: 'Module',
          show: true,
          width: 130
        },
        {
          label: '操作类型',
          value: 'Action',
          show: true
        },
        {
          label: '浏览器信息',
          value: 'Browser',
          show: true,
        },
        {
          label: '描述',
          value: 'Description',
          show: true,
        },
        {
          label: '创建时间',
          value: 'CreatedTime',
          show: true,
          width: 180
        }
      ],
      searchForm: {
        expend: true,
        title: '表格筛选',
        size: 'small',
        fields: [
          {
            show: true,
            type: 'input',
            label: '操作人姓名',
            labelShow: true,
            name: 'userName'
          },
          {
            show: true,
            type: 'input',
            label: '操作人公司',
            labelShow: true,
            name: 'companyName'
          },
          {
            show: true,
            type: 'datePicker',
            label: '时间',
            labelShow: true,
            name: ['startTime', 'endTime'],
            isRange: true
          }
        ]
      }
    }
  },
  methods: {
    closeReload(val) {
      this.reload = val
    }
  }
}
</script>
<style lang="css" scoped>
.ellipsis {
  width: 100%; /* 根据实际需要调整宽度 */
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #409EFF;
}
</style>
